<template>
  <div>
    <div class="outdiv biaoti">用户管理</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">

    <div class="outdiv">
      <div class="search clear">
          <div style="float: left">
            <el-input style="width:17rem;margin-right:1rem" v-model="searchUser"  placeholder="请输入用户姓名或电话"
                      clearable></el-input>
            <!--<el-button @click="search" type="primary" icon="el-icon-search" size="small">查询</el-button>
            <el-button @click="clearSearch" type="primary" icon="el-icon-refresh" size="small">重置</el-button>-->
            <el-tooltip content="搜索" placement="top">
              <el-button type="primary" icon="el-icon-search" plain @click="search" circle></el-button>
            </el-tooltip>
            <el-tooltip content="重置" placement="top">
              <el-button @click="clearSearch" type="danger" icon="el-icon-refresh" plain circle></el-button>
            </el-tooltip>
          </div>
        <div style="float: right">
          <el-tooltip content="添加用户" placement="top">
            <el-button type="primary"  @click="addUser" icon="el-icon-plus" plain circle></el-button>
          </el-tooltip>
          <el-tooltip content="导出数据" placement="top">
            <el-button type="danger" icon="el-icon-share" @click="exportExcel" plain circle></el-button>
          </el-tooltip>
        </div>
      </div>

      <!--        表格-->
      <template>
        <el-table @selection-change="SelectionChange" class="shangjuli xiajuli" v-loading="loading" element-loading-text="加载中" :data="elTableData"  style="width: 100%"
          max-height="500">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="user_id" label="ID"></el-table-column>
          <el-table-column prop="user_name" label="姓名" ></el-table-column>
          <el-table-column prop="user_idnum" label="身份证号" ></el-table-column>
          <el-table-column prop="user_phone" label="手机号"></el-table-column>
          <el-table-column prop="user_email" label="Email" ></el-table-column>
<!--          <el-table-column prop="juese" label="角色" ></el-table-column>-->
          <el-table-column prop="user_desc" label="备注"></el-table-column>
          <el-table-column prop="user_last_time" label="最后登录时间"></el-table-column>
          <el-table-column label="操作" max-width="100">
            <template slot-scope="scope">
              <el-tooltip content="修改" placement="top">
                <el-button @click="xiuGaiClick(scope.row)" type="primary" icon="el-icon-edit" plain circle></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!--    导出表格数据-->
      <el-table :data="XuanZhongData" style="display: none" id="table">
        <el-table-column prop="user_id" label="ID" min-width="80"></el-table-column>
        <el-table-column prop="user_name" label="姓名" max-width="100"></el-table-column>
        <el-table-column prop="user_idnum" label="身份证号" max-width="200"></el-table-column>
        <el-table-column prop="user_phone" label="手机号" max-width="150"></el-table-column>
        <el-table-column prop="user_email" label="Email" max-width="120"></el-table-column>
<!--        <el-table-column prop="juese" label="角色" max-width="120"></el-table-column>-->
        <el-table-column prop="user_desc" label="备注" max-width="150"></el-table-column>
        <el-table-column prop="user_last_time" label="最后登录时间" max-width="120"></el-table-column>
      </el-table>

      <!--        页码-->
      <div class="fenPage">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[5,10,20]" :page-size=this.pageSize
          layout="total, sizes, prev, pager, next, jumper" :total=tableData.length>
        </el-pagination>
      </div>
    </div>

    <!--        弹窗-->
    <userForm :title="biaoTi" :state="dialogFormVisible" :formData="form" @quxiaotanKuang="quxiao"></userForm>
  </div>
</template>

<script>
  import * as api from '../../utils/api'
  import userForm from "../../components/guanli/userManagementForm";
  import jiangMethod from '../../utils/jiangMethod'

  import FileSaver from "file-saver";
  import XLSX from "xlsx";

  export default {
    name: "yonghuguanli",
    components: {
      userForm
    },
    data() {
      return {
        loading: true,
        //查询
        searchUser: '',

        tableData: [],
        XuanZhongData:[],

        //分页
        currentPage4: 1,
        elPage: 1,
        pageSize: 5,

        //弹窗
        biaoTi: '',
        dialogFormVisible: false,
        form: {
          user_name: '',
          user_pwd: '',
          user_idnum: '',
          user_phone: '',
          user_id: '',
          user_desc: '',
          user_email: ''
        },

      }
    },
    computed: {
      elTableData() {
        let kaiShi = (this.elPage - 1) * this.pageSize
        let jieShu = (this.elPage - 1) * this.pageSize + this.pageSize
        return this.tableData.slice(kaiShi, jieShu)
      }
    },
    created() {
      this.searchData(null)
    },
    methods: {
      // 选中的数据
      SelectionChange(val){
        this.XuanZhongData=val
      },
      // 导出
      exportExcel() {
        let wb = XLSX.utils.table_to_book(document.querySelector('#table')); // 这里就是表格
        let wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        });
        try {
          FileSaver.saveAs(new Blob([wbout], {
            type: 'application/octet-stream'
          }), 'table.xlsx'); //table是自己导出文件时的命名，随意
        } catch (e) {
          if (typeof console !== 'undefined')
            console.log(e, wbout)
        }
        return wbout
      },

      clearSearch() {
        this.$message({
          showClose: true,
          type: "success",
          message: '重置数据中'
        })
        this.searchUser = ''
        this.searchData(null)
      },
      selectAll() {
        this.searchData(null)
      },
      searchData(val) {
        this.loading = true
        this.axios({
          method: 'get',
          url: api.queryUser,
          params: {
            userName: val
          }
        }).then(data => {
          console.log(data.data.data)
          if(data.data.code===200){
            this.tableData = data.data.data
            this.tableData.map(item => {
              if (!item.user_last_time) {
                item['user_last_time'] = '未登录'
              }
              if (item.role_id===1){
                item['juese'] = '超级管理员'
              }else if (item.role_id===2){
                item['juese'] = '管理员'
              }else if (item.role_id===3){
                item['juese'] = '司机'
              }else if (item.role_id===4){
                item['juese'] = '用户'
              }
            })
          }else {
            this.tableData = []
          }
          this.loading = false
        })
      },
      //搜索信息
      search() {
        // console.log(jiangMethod.yanzheng(this.searchUser))
        if (jiangMethod.yanzheng(this.searchUser)) {
          // console.log(this.searchUser)
          this.$message({
            showClose: true,
            type: "success",
            message: '数据搜索中'
          })
          // 发送请求
          this.searchData(this.searchUser)
        } else if (this.searchUser === '') {
          this.$message({
            showClose: true,
            type: "warning",
            message: '未输入用户名或电话号码，将查询所有用户'
          })
          this.searchData(null)
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: '请输入正确的用户名或电话号码'
          })
        }

      },
      // 添加用户
      addUser() {
        this.biaoTi = '添加用户信息'
        this.dialogFormVisible = true
      },
      // 修改数据
      xiuGaiClick(row) {
        this.biaoTi = '修改用户信息'
        this.form = {
          ...row
        }
        // console.log(this.form)
        this.dialogFormVisible = true
      },
      //改变子组件 弹窗 状态
      quxiao() {
        this.searchData(null)
        this.dialogFormVisible = false
        this.form = {
          user_name: '',
          user_pwd: '',
          user_idnum: '',
          user_phone: '',
          user_id: '',
          user_desc: '',
          user_email: ''
        }
      },

      // 每页显示条数
      handleSizeChange(val) {
        this.pageSize = val
      },
      // 当前页码
      handleCurrentChange(val) {
        this.elPage = val
      }
    }
  }
</script>

<style lang="less" scoped>
  .clear:after {
    content: '';
    display: block;
    clear: both;
  }
  .leftTopCz {
    float: left;
    text-align: left;
    margin: 0 0 2rem;

    .search {
      /*border: 1px solid red;*/
      margin: 2rem 0;

      .el-input {
        width: 20rem;
        border: 1px solid deepskyblue;
        margin-right: 2rem;
      }
    }
  }

  .fenPage {
    width: 100%;
    /*border: 1px solid red;*/
    text-align: center;
    margin: 4rem 0 0 0;
  }
  /deep/.el-table th>.cell {
    text-align: center;
  }

  /deep/.el-table .cell {
    text-align: center;
  }
</style>